<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit"/>
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <!-- <link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../css/top.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../css/index.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../css/layout.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/reg.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="../css/footer.css" /> -->
    <link rel="shortcut icon" href="../favicon.ico"/>
    <!--我的-->
    <script src="../js/common/LinsCommon.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="regPage">
    <!--透明层 -->
    <div class="regDiv">
        <h3>新用户注册</h3>
        <!--表单开始-->
        <form id="form-reg" class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-8 username">
                    <input id="username" name="username" type="text" class="form-control" placeholder="输入用户名">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-8 password">
                    <input id="password" name="password" type="text" class="form-control" placeholder="输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-8 password2">
                    <input id="password2" name="password2" type="text" class="form-control" placeholder="再次输入密码">
                </div>
            </div>
            <div class="form-group ">
                <div class="col-md-8 verification">
                    <div class="clo-2">
                        <input id="verification" name="verification" type="text" class="form-control"
                               style="width: 50%" placeholder="输入图形验证码">
                        <img id="imgCode" ref="vcImg" src="/login/getYzmImage" alt="图形验证码">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-8 phoneNum">
                    <div class="clo-2">
                        <input id="phoneNum" name="phoneNum" type="text" class="form-control" style="width: auto"
                               placeholder="输入手机号">
                        <input type="button" value="获取验证码" class="btn btn-default" onclick="getPhoneCode(this)"/>
                    </div>
                </div>
            </div>
            <div class="form-group ">
                <div class="col-md-8 msmCode">
                    <input id="msmCode" name="msmCode" type="text" class="form-control" placeholder="请填入短信验证码">
                </div>
            </div>
            <!--隐藏：IP-->
            <input id="clientIp" name="clientIp" type="hidden" >
            <input id="clientArea" name="clientArea" type="hidden" >
            <!--提交按钮-->
            <div class="form-group">
                <label class="col-md-3 control-label"></label>
                <div class="col-md-8">
                    <input id="btn-reg" class="btn btn-primary" type="button" value="立即注册"/>
                    <span class="pull-right"><small>已经有账号？</small><a href="login.html">登录</a></span>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

<script type="text/javascript">
    // 表单手机号单独校验
    function checkPhoneNum() {
        $(".phoneNum").find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
        var flag = /^1[3-9]\d{9}$/.test($("#phoneNum").val());
        if (flag) {
            $("#phoneNum").css("border", "");
        } else {
            $("#phoneNum").css("border", "1px solid red");
            $(".phoneNum").append("<span class='msg onError'>" + '请填入手机号' + "</span>");
        }
        return flag;
    }

    const rules = {
        username: '请填入用户名',
        password: '请填入密码',
        password2: '请再次填入密码',
        verification: '请填入图形验证码',
        msmCode: '请填入短信验证码'
    };

    const rules2 = {
        verification: '请填入图形验证码'
    };

    $(function () {
        initMultipleCheck(1,rules);
        $("#phoneNum").blur(checkPhoneNum);
    })

    // 重新获取表单验证码
    $("#imgCode").click(function () {
        $("#imgCode").attr("src", "/login/getYzmImage?" + Math.random());
    });

    //获取手机验证码
    let countdown = 60;
    let sendVerificationCode = function (obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "重新获取";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新获取(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
            sendVerificationCode(obj)
        }, 1000)
    }
    let getPhoneCode = function (obj) {
        if (initMultipleCheck(2,rules2) && checkPhoneNum()) {
            let data = $("#form-reg").serialize();

            function sendPhoneCodeSuccess(json){
                if (json.code == 200) {
                    //获取验证码图标开始倒计时60秒
                    sendVerificationCode(obj)
                } else {
                    requestOkButCodeError(json)
                }
            }
            $.ajax({
                url: "/msm/sendPhoneCode",
                type: "POST",
                data: data,
                dataType: "json",
                success: sendPhoneCodeSuccess,
                error: error
            });
        } else {
            initMultipleCheck(0,rules2);
            checkPhoneNum();
        }
    }

    //监听注册按钮被点击
    $("#btn-reg").click(function () {
        if (initMultipleCheck(2,rules)&&checkPhoneNum()) {
            //获取客户端IP地址
            /*$.ajax({
                url: "http://api.ip33.com/ip/search",
                type: "GET",
                async: false,
                // cache: false,
                dataType: "json",
                success: searchIpSuccess
            });*/

            function regSuccess(json) {
                if (json.code == 200) {
                    alert("注册成功！");
                    location.href = "login.html";
                } else {
                    alert("注册失败！" + json.msg);
                }
            }

            $.ajax({
                url: "/login/regNew",
                type: "POST",
                data: $("#form-reg").serialize(),
                dataType: "json",
                success: regSuccess,
                error: error
            });
        } else {
            // console.log("表单校验未通过")
            initMultipleCheck(0,rules);
            checkPhoneNum();
        }
    });
</script>

</html>